<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
<script>
    //一.运动的原理
    //1.运动改变物体的css属性(宽高,位置......)
    //offsetWidth/offsetHeight/offsetLeft/offsetTop
    //getComputedStyle/currentStyle 获取任意的css属性值


    //2.定时器 - setInterval()

    //3.通过定时器改变元素css属性

    //4.让物体动起来。
    const box = document.querySelector('.box');
    let timer = null; //定时器的返回值。
    box.onclick = function() {
        clearInterval(timer); //清除前面的定时器
        timer = setInterval(() => {
            box.style.left = box.offsetLeft + 5 + 'px'; //不断获取当前值+5再赋值
        }, 1000 / 60);
    };

    //问题：频繁点击box，定时器会叠加，速度变得越来越大。
    //解决方式：每次开启一个定时器。关闭前面的定时器。
</script>